// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

// 留心1：除了App这个组件名用大驼峰 其他都用小驼峰
// 留心2：组件名导入统一大驼峰  防止和html标签冲突
import Header from "../../components/qfSwiper";
import QfNavBar from "../../components/qfNavBar";
import QfTabs from "../../components/qfTabs";
import QfTabBar from "../../components/qfTabBar";
import Film from "./components/film";

import "./styled.scss";
// import styled from "./styled.module.scss";

class Index extends Component {
  state = {
    type: 1,
    header: {
      width: "100%",
      background: "#fff",
      position: "relative",
      top: "-45px",
      zIndex: 0,
    },
  };

  onUpdateType = (type: 1 | 2) => {
    this.setState({
      type,
    });
  };

  // mounted
  // onMounted
  componentDidMount(): void {
    // 1 监控滚动条滚动
    window.addEventListener("scroll", () => {
      // 2 获取卷去的高度
      const scrollTop = document.documentElement.scrollTop;
      // 3 判断如果卷曲的高度 >= 140 轮播图高度  咱们 fixed top 0 z-index 1   else  z-index 0  position relative top -45
      if (scrollTop >= 140) {
        this.setState({
          header: {
            width: "100%",
            background: "#fff",
            position: "fixed",
            top: 0,
            zIndex: 2,
          },
        });
      } else {
        this.setState({
          header: {
            width: "100%",
            background: "#fff",
            position: "relative",
            top: "-45px",
            zIndex: 0,
          },
        });
      }
    });
  }

  render() {
    return (
      <div className="home">
        {/* <h1 className={styled.title}>首页</h1> */}
        {/* 轮播图 */}
        <div className="swiper">
          <Header />
        </div>
        {/* 轮播图 */}

        {/* 头部 */}
        <header style={this.state.header as object}>
          <QfNavBar
            title="锋神电影🎬"
            left={
              <>
                <span>城市</span>
                <img src={require("../../assets/down.png")} alt="down" />
              </>
            }
          />
          <QfTabs onUpdateType={this.onUpdateType} />
        </header>
        {/* 头部 */}

        {/* 电影列表 */}
        <div
          className="content"
          style={{ marginTop: "-45px", paddingBottom: "100px" }}
        >
          {/* <Film type={1} /> */}
          {/* <Film type={2} /> */}
          <Film type={this.state.type as 1 | 2} />
        </div>
        {/* 电影列表 */}

        {/* 底部导航 */}
        <QfTabBar />
        {/* 底部导航 */}
      </div>
    );
  }
}
export default Index;
